<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <style>
        #reciprocal {
            border: 1px solid #d9d9d9;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
            border-radius: 5px;
            width: 480px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>

</head>

<body>
    <div id="reciprocal">距离考试结束还有&nbsp;&nbsp;<span id="countDown">02:00:00</span></div>
    <script>
        // 倒计时
        var hour = 2, minute = 0, seconds = 0;
        var timer = setInterval(function () {
            if (minute == 0 && hour != 0 && seconds == 0) {
                minute = 60;
                hour--;
            }
            seconds--;
            if (seconds < 0 && minute != 0) {
                seconds = 59;
                minute--;
            }
            var hourStr = hour, minuteStr = minute, secondsStr = seconds;
            if (hour < 10) hourStr = "0" + hour;
            if (minute < 10) minuteStr = "0" + minute;
            if (seconds < 10) secondsStr = "0" + seconds;
            if (hour == 0 && minute == 0 && seconds == 0) clearInterval(timer);
            document.getElementById("countDown").innerHTML = hourStr + ":" + minuteStr + ":" + secondsStr;
        }, 1000);
    </script>
</body>

</html>